import classnames from 'classnames'

import Icon from '@/components/Icon'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import styles from './index.module.scss'
import { Image } from 'antd-mobile'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')
type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type: 0 | 1 | 3
  title: string
  aut_name: string
  comm_count: number
  pubdate: string
  images: string[]
}

const ArticleItem = ({
  type,
  title,
  aut_name,
  comm_count,
  pubdate,
  images,
}: Props) => {
  return (
    <div className={styles.root}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, index) => (
              <div className="article-img-wrapper" key={index}>
                <Image
                  // 开启懒加载
                  lazy
                  // 设置图片宽高
                  style={{
                    '--width': '110px',
                    '--height': '75px',
                  }}
                  src={item}
                  alt=""
                />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count}</span>
        <span>{dayjs().from(dayjs(pubdate))}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
